<template>
  <div>
    <div class="toop">
      <div class="logo">
        <div class="logo_img">
          <div class="image">
            <img src="@/assets/logos.png" alt="" />
          </div>
          <div class="text">武警衡水支队智慧党建云平台</div>
        </div>
        <div class="sousuo">
          <div class="inp">
            <input
              type="text"
              placeholder="搜索文章"
              @keydown.enter="ss"
              v-model="names.keyword"
            />
            <!-- <router-link to="/search">About</router-link> -->
            <el-icon class="iconto" style="cursor: pointer" @click="ss">
              <Search />
            </el-icon>
          </div>
          <div class="login" @click="tuichu">
            <div class="hyn">欢迎你</div>
            <div>
              <img :src="moren" alt="" />
            </div>
            <div>{{ nickname }}</div>
            <div class="xiala">
              <el-icon v-if="flge">
                <ArrowDown />
              </el-icon>
              <el-icon v-else>
                <ArrowUp />
              </el-icon>
              <div class="xlk" v-if="!flge">
                <li class="li1" @click="personage">个人中心</li>
                <li @click="tclogin">退出登录</li>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="menu_box">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        router="true"
        :popper-offset="10"
        text-color="#fff"
      >
        <el-menu-item index="/home/index">首页</el-menu-item>
        <!-- <el-menu-item index="">团队风采馆</el-menu-item> -->
        <el-sub-menu index="2">
          <template #title><span id="qqq">团队风采馆</span></template>
          <el-menu-item index="/home/team-t">支部风采</el-menu-item>
          <el-menu-item index="/home/team-d">党员风采</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/home/workbenck">党务工作台</el-menu-item>
        <el-menu-item index="/home/publicbar">党务公开栏</el-menu-item>
        <el-menu-item index="/home/alermbells">党纪警示钟</el-menu-item>
        <el-menu-item index="/home/msgboards">党员留言板</el-menu-item>
        <!-- <el-menu-item index="/bigdata">党建大数据</el-menu-item> -->
        <el-menu-item index="/event">党建大数据</el-menu-item>
      </el-menu>
    </div>

    <div class="main">
      <!-- 搜索 -->
      <div class="nav">
        <div class="nav_box">
          <router-link to="/home/index" class="router-link-active"
            >首页</router-link
          >
          <el-icon color="#999">
            <DArrowRight />
          </el-icon>
          <router-link to="/search" class="router-link-active"
            >搜索</router-link
          >
          <el-icon color="#999">
            <DArrowRight />
          </el-icon>
          <router-link to="/search" class="router-link-active"
            >搜索结果</router-link
          >
        </div>
      </div>
      <!-- 内容 -->
      <div class="content">
        <div class="v_top">
          <div
            v-for="(item, i) in list"
            :key="i"
            style="cursor: pointer"
            @click="citem(i)"
            :class="myitem == i ? 'v_item1' : 'v_item'"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="v_con">
          <div
            class="v_item"
            v-for="item in data"
            :key="item.id"
            style="cursor: pointer"
            @click="particulars(item.id)"
          >
            <div class="title" v-if="myss">
              {{ item.title }}
            </div>
            <div class="title" v-html="showKeyWord(item.title)" v-else></div>
            <div class="time">{{ item.create_time }}</div>
          </div>
        </div>
        <div class="con_bom">
          <div class="cc">共{{ total }}条</div>
          <el-pagination
            v-model:page-size="pageSize"
            background
            layout="prev, pager, next"
            :total="total"
            @next-click="nextclick"
            @prev-click="prevclick"
            @change="change1"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import { getmatrixApi, getnetworkApi3, getreleaseApi } from '@/api/user'
const myss = ref(true)
// const sou = ref(router.currentRoute.value.query.ss)
const sou = router.currentRoute.value.query.ss
  ? router.currentRoute.value.query.ss
  : ''
const ss = () => {
  if (names.value.keyword == '') {
    myss.value = true
  } else {
    myss.value = false
  }
  if (myitem.value == 0) {
    getnetwork()
  } else if (myitem.value == 1) {
    getnetwork1()
  } else if (myitem.value == 2) {
    getnetwork2()
  }
}
const showKeyWord = (val: any) => {
  var str = val
  let s = names.value.keyword
  //复制过来的数据中间带有空格的，去除中间空格，字符之间用逗号隔开
  let inputvalue = s.replace(/\ +/g, ',') //把空格分开的字符串转换成以逗号分割
  let keyWordArr2 = inputvalue.split(',') //把字符串转换成数组
  // 当对话内容中有包含搜索框中的字符串时
  if (str && str != '') {
    keyWordArr2.forEach((e: any) => {
      let regStr = '' + `(${e})`
      let reg = new RegExp(regStr, 'g')
      str = str.replace(
        reg,
        '<span style="color:red; font-weight: bold;">' + e + '</span>'
      )
    })
  }
  return str
}
let Router = useRouter()
function particulars(id: any) {
  if (myitem.value == 0) {
    Router.push({ path: '/home/particulars', query: { id } })
  } else if (myitem.value == 1) {
    Router.push({ path: '/home/articles', query: { id } })
  } else if (myitem.value == 2) {
    let data = id
    Router.push({
      path: '/home/publicbar/publicchild/process',
      query: { data }
    })
  }
}
function personage() {
  Router.push('/home/personage/centre')
}
let nickname = ref()
let moren = ref()
nickname.value = localStorage.getItem('nickname')
moren.value = localStorage.getItem('avatar')
let flge = ref(true)
const tuichu = () => {
  flge.value = !flge.value
}
const tclogin = () => {
  localStorage.removeItem('nickname')
  localStorage.removeItem('avatar')
  localStorage.removeItem('token')
  localStorage.removeItem('position')
  Router.push('/login')
}
const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const list = ref([
  { name: '学习矩阵' },
  { name: '党员充电站' },
  { name: '党务公开栏' }
])
let myitem = ref(0)
const citem = (ev: number) => {
  myitem.value = ev
  console.log(ev, myitem.value)
  if (ev == 0) {
    getnetwork()
  } else if (ev == 1) {
    getnetwork1()
  } else if (ev == 2) {
    getnetwork2()
  }
}
let names: any = ref({
  cid: '',
  keyword: sou,
  page: 1,
  page_size: 5
})
const total = ref(0)
const data = ref()
const getnetwork = () => {
  // if (sou.value) {
  // sou.value = sou.value ? sou.value : ''
  // names.value.keyword = names.value.keyword ? names.value.keyword : sou.value
  console.log(names.value.keyword)

  // }
  getmatrixApi(names.value).then(res => {
    data.value = res.data.data.data
    total.value = res.data.data.total
    console.log('内容', data.value)
  })
}
getnetwork()
const getnetwork1 = () => {
  getnetworkApi3(names.value).then(res => {
    data.value = res.data.data.data
    total.value = res.data.data.total
    console.log('内容1', data.value)
  })
}
const getnetwork2 = () => {
  getreleaseApi(names.value).then(res => {
    data.value = res.data.data.data
    total.value = res.data.data.total
    console.log('内容2', data.value)
  })
}

const pageSize = ref(5)
const nextclick = () => {
  names.value.page++
  if (myitem.value == 0) {
    getnetwork()
  } else if (myitem.value == 1) {
    getnetwork1()
  } else if (myitem.value == 2) {
    getnetwork2()
  }
}
const prevclick = () => {
  names.value.page--
  if (myitem.value == 0) {
    getnetwork()
  } else if (myitem.value == 1) {
    getnetwork1()
  } else if (myitem.value == 2) {
    getnetwork2()
  }
}
const change1 = (e: any) => {
  console.log(e)
  names.value.page = e
  if (myitem.value == 0) {
    getnetwork()
  } else if (myitem.value == 1) {
    getnetwork1()
  } else if (myitem.value == 2) {
    getnetwork2()
  }
}
ss()
</script>
<style lang="scss">
.el-menu--horizontal > .el-menu-item.is-active {
  background-color: #f39d9d9d !important;
  color: #fff !important;
}

//团队风采关标题滑动
.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
  background-color: #e02020 !important;
}

.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
  color: #fff !important;
  // font-size: 18px !important;
}

.el-menu--horizontal.el-menu {
  border-bottom: none !important;
}

.el-menu--popup-bottom-start li {
  width: 100% !important;
  color: #fff !important;
  background: #e0202062 !important;
}

.el-menu--popup-bottom-start {
  background: #e02020ad;
  // width: 50px !important;
}

// ::v-deep .el-menu--popup-bottom-start {
//   width: 50px !important;
// }

.el-menu .el-menu--inline li {
  width: 100% !important;
  color: #666 !important;
}

.el-menu {
  border-right: none !important;
}

// .el-menu .el-menu--inline li:hover {
//   width: 100% !important;
//   color: #e02020 !important;
// }

.el-menu--popup-bottom-start li {
  color: #fffefe !important;
  background: transparent !important;
  // text-align: center !important;
  // padding: 30px !important;
}

// .el-menu--popup-bottom-start li:nth-child(1) {
//   border-bottom: solid 2px #fff !important;

// }

// .el-menu--popup-bottom-start {
//   // background: #da070782 !important;

// }
// .el-menu el-menu--horizontal el-menu-demo
// style attribute {
//   --el-menu-text-color: #fff;
//   --el-menu-hover-text-color: #fff;
//   --el-menu-level: 0;
// }

:root {
  --el-color-primary-light-9: rgba(224, 32, 32, 0);
  --el-menu-active-color: rgba(224, 32, 32, 0.1);
  // --el-menu-hover-text-color: #eb60609d;
  // --el-menu-hover-text-color: #E02020;
  // --el-text-color-primary: #E02020
  --el-color-primary: #e02020;
  // --active-color: #ff0
  // --bg-color: #ff0
}

// .qqq:hover {
//   background-color: #eb60609d !important;
//   color: #fff !important;
// }
</style>

<style lang="scss" scoped>
#qqq {
  font-size: 18px !important;
}

.el-menu-item {
  text-align: center;
  width: 154px !important;
  font-size: 18px !important;
}

.content {
  position: relative;
  width: 1048px;
  height: 1200px;
  margin: 0 auto;
  background: #ffffff;

  .con_bom {
    position: absolute;
    bottom: 100px;
    left: 50%;
    display: flex;
    transform: translateX(-50%);

    .cc {
      margin-top: 8px;
    }
  }

  .v_con {
    .v_item {
      margin-top: 36px;
      padding: 0 48px;

      .title {
        font-size: 22px;
        font-weight: 600;
        color: #1a1a1a;
        white-space: nowrap;
        /* 防止文本换行 */
        overflow: hidden;
        /* 隐藏溢出内容 */
        text-overflow: ellipsis;
        /* 当文本溢出时，使用省略号表示 */
        width: 960px;
        /* 定义容器宽度 */
      }

      .time {
        margin-top: 13px;
        font-size: 14px;
        color: #767676;
      }
    }
  }

  .v_bom {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
  }

  .v_top {
    display: flex;
    padding-top: 26px;
    margin-left: 45px;

    .v_item {
      width: 128px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      font-size: 16px;
      font-weight: normal;
      color: #999999;
    }

    .v_item1 {
      width: 128px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      border-bottom: 1px solid #e02020;
      font-size: 16px;
      font-weight: 600;
      color: #e02020;
    }
  }
}

.nav {
  margin: 0 auto;
  width: 1080px;
  height: 54px;
  line-height: 54px;
  background-color: #fff;
  margin-bottom: 16px;

  .nav_box {
    display: flex;
    align-items: center;
    margin-left: 44px;
    font-size: 16px;
    color: #999999;

    .router-link-active {
      font-size: 16px;
      color: #999999 !important;
      text-decoration: none;
    }

    .el-icon {
      margin: 0 10px 0 10px;
    }
  }
}

// @media (min-width: 2160px) {
//   .el-menu-demo {
//     // display: flex;
//     width: 70%;
//     margin: 0 auto;
//     background: #e02020;
//   }

//   .box {
//     width: 100%;
//     margin: 0 auto;
//   }

//   .main {
//     width: 100%;
//     margin: 0 auto;
//   }
// }

// .demonstration {
//   color: var(--el-text-color-secondary);
// }

.menu_box {
  background: #e02020;
  // text-align: center;
}

// .el-menu {
//   // text-align: center !important;
//   margin-left: 410px !important;
//   margin-right: 400px !important;
// }

// @media (max-width: 2159px) {
.el-menu-demo {
  // display: flex;
  // width: 1080px;
  justify-content: center;
  // margin: 0 auto;
  background: #e02020;
}
@media (min-width: 1081px) {
  ::v-deep .el-menu {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 1080px) {
  ::v-deep .el-carousel__container {
    width: 1080px !important;
    height: 420px !important;
  }

  .el-carousel--horizontal {
    width: 1080px !important;
  }

  .el-carousel__item {
    width: 1080px !important;
  }

  .imagessss {
    width: 1080px !important;
    height: 100%;
    // height: 420px;
  }
}
.main {
  width: 1080px;
  margin: 0 auto;
  // background-color: #f0f0f0;
}

// }

.logo {
  display: flex;
  width: 1080px;
  margin: 0 auto;
  justify-content: space-between;
  // justify-content: space-around;
  height: 50px;

  .logo_img {
    width: 50%;
    font-size: 14px;
    display: flex;
    // width: 25%;
    line-height: 50px;

    .text {
      color: red;
      font-weight: 800;
      font-size: 18px;
    }

    .image {
      width: 40px;
      height: 40px;
      margin: 0 1vh;
      // margin-left: 5%;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .sousuo {
    width: 50%;
    // width: 30%;
    height: 8vh;
    display: flex;
    justify-content: space-evenly;
    // flex: 10;
    font-size: 14px;

    .inp {
      // width: 40%;
      width: 263px;
      height: 30px;
      margin-right: 10%;
      position: relative;
      margin-top: 10px;
    }

    input {
      width: 100%;
      height: 30px;
      border: none;
      border-radius: 25px;
      background: #f5f5f5;
      text-indent: 20px;
      font-size: 14px;
    }

    input::placeholder {
      // margin-left: 20px;
      text-indent: 20px;
    }

    .iconto {
      position: absolute;
      right: 3%;
      top: 8px;
      color: red;
    }

    .login {
      // width: 50%;
      width: 200px;
      display: flex;
      height: 50px;
      line-height: 50px;
      cursor: pointer;
      margin-right: 20px;
      color: #9e9e9e;

      .hyn {
        // margin: 0 20px;
        margin-right: 10px;
        width: 48px;
        font-size: 16px;
      }

      .nick {
        margin: 0 10px;
      }

      // div {
      //   margin-right: 2%;
      //   margin-left: 2%;
      // }

      img {
        width: 40px;
        height: 40px;
        margin-top: 2px;
        border-radius: 50%;
      }
    }
  }
}

.xiala {
  position: relative;
  cursor: pointer;
}

.xlk {
  width: 157px;
  height: 110.5px;
  background: #fff;
  position: absolute;
  top: 40px;
  right: -80px;
  z-index: 9999;
  border-radius: 15px;
  border: 2px solid #666;

  // box-shadow: 1px 1px 1px 1px #666;
  li {
    list-style: none;
    text-align: center;
    height: 55px;
    // background: #475669;
  }

  li:hover {
    color: #e02020;
    cursor: pointer;
  }

  .li1 {
    border-bottom: solid 2px #ccc;
  }
}

.toop {
  background-color: #fff;
}
</style>
